<template>
	<view class="new_file" v-if="showAutograph">
		<view class="popupBox">
			<view class="popupTopBox">请本人签字</view>
			<canvas id="mycanvas" class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove"
				@touchend="touchend"></canvas>
			<u-row class="w-100 mt-4" justify="center">
				<u-col span="5" justify="center">
					<u-button type="primary" shape="circle" @click="clear">
						<view>清除</view>
					</u-button>
				</u-col>
				<u-col span="5" justify="center">
					<u-button type="primary" shape="circle" @click="confirm">
						<view>确定</view>
					</u-button>
				</u-col>
			</u-row>
		</view>
		<view class="closeIcon" @click="cancel">
			<image src="../../static/close.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		uploadImage
	} from '@/common/api/common.js';

	export default {
		name: 'Autograph',
		data() {
			return {
				showAutograph: false,
				ctx: '', //绘图图像
				points: [], //路径点集合
				signature: '',
				isEmpty: true
			};
		},
		methods: {
			//创建并显示签名画布
			autograph() {
				this.showAutograph = true;
				//创建绘图对象
				this.ctx = uni.createCanvasContext('mycanvas', this);
				//设置画笔样式
				this.ctx.lineWidth = 4;
				this.ctx.lineCap = 'round';
				this.ctx.lineJoin = 'round';
			},
			//触摸开始，获取到起点
			touchstart(e) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					X: startX,
					Y: startY
				};
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.ctx.beginPath();
			},
			//触摸移动，获取到路径点
			touchmove(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = {
					X: moveX,
					Y: moveY
				};
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}
				this.isEmpty = false;
			},
			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend() {
				this.points = [];
			},
			/* ***********************************************
						#   绘制笔迹
						#	1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
						#	2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
						#	3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
						************************************************ */
			draw() {
				let point1 = this.points[0];
				let point2 = this.points[1];
				this.points.shift();
				this.ctx.moveTo(point1.X, point1.Y);
				this.ctx.lineTo(point2.X, point2.Y);
				this.ctx.stroke();
				this.ctx.draw(true);
			},
			//清空画布
			clear() {
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.ctx.clearRect(0, 0, canvasw, canvash);
						that.ctx.draw(true);
					}
				});
				that.isEmpty = true;
			},
			//关闭并清空画布
			cancel() {
				this.showAutograph = false;
				this.clear();
				this.$emit("back", false);
			},
			//完成绘画并保存到本地
			confirm() {
				let that = this;
				const subpath = that.ctx.subpath
				if(subpath.length == 0 || that.isEmpty){
					 uni.$u.toast('本人签字不能为空!');
				}else{
					uni.canvasToTempFilePath({
						canvasId: 'mycanvas',
						success: function(res) {
							console.log("res:" + JSON.stringify(res))
							uploadImage(res.tempFilePath.replace(/^data:image\/\w+;base64,/, "")).then(
							uploadRes => {
					
								that.signature = uploadRes.fileName;
								that.$emit('back', true);
							})
						},
						fail: (error) => {
							uni.$u.toast(JSON.stringify(error));
						}
					});
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		font-family: Source Han Sans CN;
	}

	.new_file {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);

		.buttONbOX {
			position: fixed;
			left: 50%;
			top: 50%;
		}
	
	.popupBox {
			position: fixed;
			left: 50%;
			bottom: 188upx;
			transform: translate(-50%, 0);
			width: 720upx;
			height: 1055upx;
			background: #ffffff;
			border-radius: 16upx;

			.popupTopBox {
				width: 100%;
				height: 80upx;
				background: #00aee7;
				border-radius: 16upx 16upx 0px 0px;
				text-align: center;
				line-height: 80upx;
				font-size: 32upx;
				color: #ffffff;
			}

			.mycanvas {
				width: 100%;
				height: 821upx;
			}

			.determineBtn {
				width: 280upx;
				height: 69upx;
				background: #00aee7;
				border-radius: 35upx;
				margin: 0 auto;
				font-size: 30upx;
				color: #ffffff;
				text-align: center;
				line-height: 69upx;
			}
		}

		.closeIcon {
			position: fixed;
			left: 50%;
			bottom: 92upx;
			transform: translate(-50%, 0);
			width: 50upx;
			height: 50upx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
